<template>
  <div>
    <div class="conditionContent">
      <div class="one-search-condition">
        <span class="red-dot">*</span>
        <div class="one-title">姓名：</div>
        <div>
          <el-input
            v-model="paramsObj.keyWord"
            placeholder="请输入内容"
          ></el-input>
        </div>
      </div>
      <el-button class="add-btn" type="primary" @click="clickAddBtn"
        >新增</el-button
      >
      <el-button class="search-btn" type="primary" @click="goToSearch"
        >查询</el-button
      >
    </div>
    <div ref="tableContent">
      <el-table
        v-loading="elementTableLoading"
        tooltip-effect="dark"
        :height="tableHeight"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          v-for="(col, idx) in columns"
          :key="idx"
          :prop="col.prop"
          :label="col.label"
          :sortable="col.sortable"
          :formatter="col.formatter"
        >
        </el-table-column>
        <el-table-column
          fixed="right"
          prop=""
          label="操作"
          :formatter="doFormatter"
        >
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small"
            >
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <addEditDialog :status.sync="dialogStatus" @ok="goToSearch" />
  </div>
</template>

<script>
import addEditDialog from "@/views/modules/xxl-springboot/role/components/add-edit-dialog.vue";

import { getAllRole, deleteRole } from "@/api/xxl-springboot/role.js";
import setBodyHeightMixins from "@/mixins/set-body-height.js";

export default {
  mixins: [setBodyHeightMixins],
  data() {
    return {
      elementTableLoading: false,
      dialogStatus: false,
      columns: [
        // {
        //   label: "序号",
        //   prop: "num",
        //   sortable: true,
        // },
        {
          label: "角色id",
          prop: "role_id",
        },
        {
          label: "角色名",
          prop: "role_name",
        },
        {
          label: "备注",
          prop: "remark",
        },
        {
          label: "创建人",
          prop: "create_user_id",
        },
        {
          label: "创建时间",
          prop: "create_time",
        },
      ],
      tableData: [],
      paramsObj: {
        keyWord: "",
      },
      tableHeight: 200,
      multipleSelection: [],
    };
  },
  components: {
    addEditDialog,
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    goToSearch() {
      this.getTableData();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // this.$refs.multipleTable.toggleRowSelection(row);
      // this.$refs.multipleTable.clearSelection();
    },
    deleteRow(idx, tData) {
      this.$confirm("确认删除？")
        .then(async (_) => {
          const params = {
            role_id: tData[idx].role_id,
          };
          const { code } = await deleteRole(params);
          if (code == 200) {
            this.getTableData();
            done();
          }
        })
        .catch((_) => {});
    },
    clickAddBtn() {
      this.dialogStatus = true;
    },
    doFormatter(row, column) {
      return "新增";
    },
    async getTableData() {
      try {
        this.elementTableLoading = true;
        const { data, code } = await getAllRole();
        if (code == 200) {
          let reslut = data || [];
          reslut.forEach((val, idx) => {
            val.num = idx + 1;
          });
          this.tableData = reslut;
        }
      } catch (e) {
        console.log("表格数据加载失败" + e);
      } finally {
        this.elementTableLoading = false;
      }
    },
    tableSizeChange() {
      setTimeout(() => {
        let refContent = this.$refs.tableContent;
        let { top } = refContent.getBoundingClientRect();
        //表格的高度 = 视口高度-top
        this.tableHeight = document.documentElement.clientHeight - 15 - top;
      }, 50);
    },
  },
};
</script>
<style lang="scss" scoped>
.conditionContent {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  .search-btn {
    margin-left: 16px;
  }
  .add-btn {
    margin-left: 16px;
  }
}
.one-search-condition {
  display: flex;
  align-items: center;
  .red-dot {
    color: red;
    margin-top: 6px;
    margin-right: 4px;
  }
  .one-title {
  }
}
</style>
